<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            cursor: pointer;
        }

        /*  */
        .box {
            margin: 20px auto;
            width: 80%;
        }

        table {
            border: 4px solid;
            border-bottom: 3px solid;
            width: 100%;
            text-align: center;
        }

        img {
            width: 100px;
            height: 100px;
            border-radius: 5px;
        }

        tbody tr th {
            border: 2px solid;
            border-left: none;
            border-right: none;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="box s">
        <table cellspacing="0">
            <thead>
                <tr>
                    <th colspan="4">
                        <h1>商品列表</h1>
                    </th>
                </tr>
                <tr height="60px">
                    <th colspan="4"><input id="name" type="text" placeholder="输入商品名称查询"
                            style="margin-right: 10px;"><button id="find">搜索</button></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="box go">
        <table cellspacing="0">
            <thead>
                <tr>
                    <th colspan="6">
                        <h1>购物车</h1>
                    </th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 全局属性
        let id
        // 异步加载
        window.onload = () => {
            data()
            $('#find').on('click', find)
            $('.s tbody').on('click', s)
        }
        // 商品数据
        let product = [
            {
                img: 'https://img13.360buyimg.com/jdcms/s480x480_jfs/t1/275025/16/13447/140246/67e9f4d2F74c09b69/33159bdb1201a18d.png.avif',
                name: '儿童玩具车',
                num: '129',
                ass: '.80',
                number: 1,
                falg: false,
                id: 0
            },
            {
                img: 'https://img10.360buyimg.com/jdcms/s480x480_jfs/t1/239038/25/16780/145383/66bc799aFac34842b/4f3321b36fa3ec6a.jpg.avif',
                name: '儿童玩具压土车',
                num: '36',
                ass: '.00',
                number: 1,
                falg: false,
                id: 1
            },
            {
                img: 'https://img20.360buyimg.com/jdcms/s480x480_jfs/t1/103054/37/36026/123924/64c78776Fddfacd4c/3b2cb618f10e8f00.jpg.avif',
                name: '小青柠饮料',
                num: '7',
                ass: '.45',
                number: 1,
                falg: false,
                id: 2
            },
        ]
        // 购物车数据
        let go = []
        // 渲染商品
        function data() {
            $('.s tbody').html('')
            $.each(product, (index, item) => {
                $('.s tbody').append(`
                    <tr>
                        <th><img src="${item.img}"
                                alt=""></th>
                        <th>${item.name}</th>
                        <th>
                            <i style="color: red;font-size: 14px;">¥</i>
                            <span style="color: red;font-size: 23px;">${item.num}</span>
                            <span style="color: red;font-size: 14px;">${item.ass}</span>
                        </th>
                        <th><button data-index = '${index}'>加入购物车</button></th>
                    </tr>
                `)
            })
        }
        // 搜索
        function find() {
            if ($('#name').val() !== '') {
                $.each(product, (index, item) => {
                    if (item.name.includes($('#name').val())) {
                        $('.s tbody').html('')
                        $('.s tbody').append(`
                    <tr>
                        <th><img src="${item.img}"
                                alt=""></th>
                        <th>${item.name}</th>
                        <th>
                            <i style="color: red;font-size: 14px;">¥</i>
                            <span style="color: red;font-size: 23px;">${item.num}</span>
                            <span style="color: red;font-size: 14px;">${item.ass}</span>
                        </th>
                        <th><button data-index = '${index}'>加入购物车</button></th>
                    </tr>
                `)
                    } else {
                        $('.s tbody').html('')
                        $('.s tbody').append(`
                    <tr>
                        <th colspan="4">
                            <h1>查找不到该商品！！！</h1>
                        </th>
                    </tr>
                `)
                    }
                })
            } else if ($('#name').val() === '') {
                data()
            }
        }
        // 加入购物车
        function s() {
            if (event.target.nodeName === 'BUTTON') {
                // id = event.target.dataset.index
                // if (go.some(item => item.id === id)) {
                    go.push(product[event.target.dataset.index])
                    gos()
                // } else {

                // }
            }
        }
        // 渲染购物车
        function gos() {
            $('.go tbody').html('')
            $.each(go, (index, item) => {
                $('.go tbody').append(`
                    <tr>
                        <th><input type="checkbox"  data-index = '${index}' ${item.falg ? 'checked' : false}></th>
                        <th><img src="${item.img}"
                                alt=""></th>
                        <th>${item.name}</th>
                        <th>
                            <i style="color: red;font-size: 14px;">¥</i>
                            <span style="color: red;font-size: 23px;">${item.num}</span>
                            <span style="color: red;font-size: 14px;">${item.ass}</span>
                        </th>
                         <th>
                            <span style='cursor: pointer;border:2px solid gray;border-radius: 5px;'>＋</span>
                            <span>${item.number}</span>
                            <span style='cursor: pointer;border:2px solid gray;border-radius: 5px;'>—</span>
                        </th>
                        <th><button data-index = '${index}'>删除</button></th>
                    </tr>
                `)
            })
        }
    </script>
</body>

</html>